<template>
    <div class="Project-Detail">
      <top-header></top-header>
      
      <div class="common-list-body" v-fullheight>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <div class="panel">
                <img v-if="projectInfo.projectMain" :src="projectInfo.projectMain.storagePath" style="width: 96vw; border-radius: 8px; overflow: hidden;"/>
            </div>
            <div class="panel" style="font-size: 18px;">
                <span class="icon iconfont icondefault_file" style="margin-right: 5px; color: #14E !important;"></span>
                <span style=" font-weight: 700; color: #14E;">{{projectInfo.name}}</span>
            </div>
            <div class="panel">
                <div style="background-color: #E8F0FF; padding: 14px; border-radius: 4px; width: 94vw;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="font-size: 18px;">项目概况</div>
                        <div v-if="showDescription" @click="changeDescriptionShow">
                            <span class="iconfont iconzhankai"></span>
                        </div>
                        <div v-else @click="changeDescriptionShow">
                            <span class="iconfont iconshouqi"></span>
                        </div>
                    </div>
                    <div style="opacity: 0.6; padding-top: 10px;" v-if="showDescription">
                        {{projectInfo.projectDesc}}
                        <div style="text-align: right; color: #14E;" @click="changeDescriptionShow">收起</div>
                    </div>
                </div>
            </div>
            
            <div class="panel">
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        项目代码
                    </div>
                    <div class="right">
                        {{projectInfo.code}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        委托单位
                    </div>
                    <div class="right">
                        {{projectInfo.party}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        项目进展
                    </div>
                    <div class="right">
                        {{projectStatus[projectInfo.status]}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        可从事业务类别
                    </div>
                    <!--<div class="right">
                        {{projectInfo.useBusinessCategory}}
                    </div>-->
                </div>
                 <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.useBusinessCategory}}
                    </div>
                 </div>
                <div></div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        包含业务类别
                    </div>
                    <!--<div class="right">
                        {{projectInfo.businessCategory}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.businessCategory}}
                    </div>
                 </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        开始服务日期
                    </div>
                    <div class="right">
                        {{projectInfo.startDate}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        完成服务日期
                    </div>
                    <div class="right">
                        {{projectInfo.endDate}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        所在地区
                    </div>
                    <div class="right">
                        {{projectInfo.areaName}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        项目地址
                    </div>
                    <div class="right">
                        {{projectInfo.address}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        项目总投资(万元)
                    </div>
                    <div class="right">
                        {{projectInfo.investment}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        所属行业
                    </div>
                    <div class="right">
                        {{projectInfo.industrys}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        建设类型
                    </div>
                    <div class="right">
                        {{BuildType[projectInfo.constructionType]}}
                    </div>
                </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        建设内容及规模
                    </div>
                    <!--<div class="right">
                        {{projectInfo.content}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.content}}
                    </div>
                 </div>
                <div class="line" v-if="showFlag">
                    <div class="left">
                        <span class="note">●</span>
                        主要服务内容
                    </div>
                   <!-- <div class="right">
                        {{projectInfo.mainServiceContent}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.mainServiceContent}}
                    </div>
                 </div>
                <div class="line">
                    <div class="left">
                        <span class="note">●</span>
                        项目团队
                    </div>
                    <!--<div class="right">
                        {{projectInfo.showProjectMember}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.showProjectMember}}
                    </div>
                 </div>




               <!-- <div class="line">
                    <div class="left">
                        <span class="note">●</span>
                        地图经纬度
                    </div>
                    <div class="right">
                        {{projectInfo.lonLat}}
                    </div>
                </div>-->
                <div class="line">
                    <div class="left">
                        <span class="note">●</span>
                        项目特点与成效
                    </div>
                    <!--<div class="right">
                        {{projectInfo.specEffect}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.specEffect}}
                    </div>
                 </div>
                <div class="line">
                    <div class="left">
                        <span class="note">●</span>
                        项目荣誉
                    </div>
                    <!--<div class="right">
                        {{projectInfo.showHonor}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.showHonor}}
                    </div>
                 </div>
                <div class="line">
                    <div class="left">
                        <span class="note">●</span>
                        包含工程类别
                    </div>
                    <!--<div class="right">
                        {{projectInfo.showHonor}}
                    </div>-->
                </div>
                <div class="line" v-if="showFlag">
                     <div class="right_new">
                        {{projectInfo.showHonor}}
                    </div>
                 </div>
                <div class="line">
                    <div class="left">
                        <span class="note">●</span>
                        项目图片
                    </div>
                    <div class="right">
                    </div>
                </div>
            </div>
            <div class="imgPanel">
                <div class="imgMax">
                    <div class="imgPrev" @click="setCurrentIndex(false)">
                        <img v-if="currentIndex >= 1" :src="projectInfo.bmsAttachments[currentIndex - 1].storagePath" style="width: 100%;"/>
                    </div>
                    <div class="imgCurrent">
                        <img v-if="currentIndex < projectInfo.bmsAttachments.length" :src="projectInfo.bmsAttachments[currentIndex].storagePath" style="width: 100%;"/>
                    </div>
                    <div class="imgNext" @click="setCurrentIndex(true)">
                        <img v-if="currentIndex < projectInfo.bmsAttachments.length - 1" :src="projectInfo.bmsAttachments[currentIndex + 1].storagePath" style="width: 100%;"/>
                    </div>
                </div>
                <div style="display: flex; width: 100vw; justify-content: center; align-items: center; padding: 15px 0;">
                    <div v-for="(item,index) in projectInfo.bmsAttachments" :key="index" style="padding: 4px; cursor: pointer;" @click="setCurrent(index)">
                        <div v-if="index==currentIndex" style="width: 20px; height: 6px; border-radius: 3px; background-color: #4AF;"></div>
                        <div v-if="index!=currentIndex" style="width: 20px; height: 6px; border-radius:if 3px; background-color: #CCC;"></div>
                    </div>
                </div>
            </div>
            <div class="filePanel" style="padding:10px;">
                <div>附件</div>
                <div style="opacity: 0.6; font-size: 8px;">
                    <div v-for="(item, index) in projectInfo.projectAtts" :key="index" style="border-bottom: 1px solid #CCC; display: flex; justify-content: space-between; align-items: center; padding: 5px; margin-bottom: 5px;">
                        <div>{{item.fileName}}</div>
                        <div style="width: 100px; display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <a :href="$filePreview(item.fileName, item.storagePath)">
                                    <span class="fine-name">预览</span>
                                </a>
                                <span class="icon iconfont iconxianshi"></span>
                                
                            </div>
                            <!--<div @click="download(index)">
                                下载
                                <span class="icon iconfont iconxiazai"></span>
                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
    </div>
    </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import TopHeader from "@/components/TopHeader.vue";
import { List, Cell, PullRefresh } from "vant";
import SearchOne from "@/components/SearchOne.vue";
import Api from "@/api";
import Base from "@/utils/base";
import Enum from "@/typings/Enum";

@Component({
  name: "ProjectList",
  components: {
    TopHeader,
    SearchOne,
    VanList: List,
    VanCell: Cell,
    VanPullRefresh: PullRefresh
  }
})
export default class ProjectDetail extends Base{
  private projectStatus = Enum.ProjectStatus;
  private BuildType = Enum.BuildType;
  
  private projectId = "";
  private refreshing = false;
  private loading = false;
  private showDescription = true;
  private industryOptions=[];
  private showFlag = false;
  private projectInfo = {
      name: '',
      imgMajor:'',
      description:'',
      location:'',
      trait:'',
      honor:'',
      enginTypes:'',
      bmsAttachments:[{}],
      projectAtts:[{}],
      files:[{}]
      };
  private currentIndex = 0;
    
  private created() {
      
    let userInfo: any = sessionStorage.getItem("userInfo")?.toString();
    userInfo = userInfo ? JSON.parse(userInfo) : {};
    console.log(userInfo);

    if(userInfo.user && userInfo.user.userName==="admin"){
      this.showFlag = true;
    }

    if(userInfo.roles.length>0){
      userInfo.roles.forEach((item: any) => {
        if(item=="project_show_library_see" || item=="project_show_library_manager"){
          this.showFlag = true;
        }
      });
    }

    this.projectId = (this.$route.query.projectId ? this.$route.query.projectId : "").toString();
    if (this.projectId) {
      this.$cPromise.all([this.GetShowProjectDetail()]);
    }
   
  }

  private async GetShowProjectDetail() {
    debugger;
    //行业类别
    const treeRes=await Api.industryCategoryTreeTwo();
    if (treeRes.code === 200) {
        this.industryOptions = treeRes.data;
        const res = await Api.GetShowProjectDetail(this.projectId);
        if (res && res.code) {
                debugger;
            let industrysR="";
            if(res.data.industrys){
                for(let i=0;i<treeRes.data.length;i++){
                    if(treeRes.data[i].id == res.data.industrys[0]){
                        industrysR=treeRes.data[i].label;
                      for(let j=0 ;j<treeRes.data[i].children.length;j++ ){
                          if(treeRes.data[i].children[j].id==res.data.industrys[1]){
                              industrysR=industrysR+" / "+ treeRes.data[i].children[j].label; 
                          }
                      }
                    }
                }
            }
            res.data.industrys=industrysR;
            this.projectInfo = res.data;
            
            if(this.projectInfo){
                if(res.data.isMember==="1"){
                    this.showFlag = true;
                }
                
                }
                if(!this.projectInfo.projectAtts){
                this.projectInfo.projectAtts=[];
                }

            this.loading = false;
            this.refreshing = false;
        }
    return res;
    }
  }



  onRefresh(){
    this.loading = true;
  }
  changeDescriptionShow(){
      this.showDescription = !this.showDescription;
  }
  setCurrentIndex(isAdd: boolean){
      if(isAdd){
          if(this.currentIndex + 1 < this.projectInfo.bmsAttachments.length){
              this.currentIndex=this.currentIndex+1;
          }
      }else{
          if(this.currentIndex - 1 >= 0){
              this.currentIndex=this.currentIndex-1;
          }
      }
  }
  setCurrent(index: number){
    this.currentIndex=index;
  }
  preview(index: number){
      alert("预览文件:"+ index);
  }
  download(index: number){
      alert("下载文件:"+ index);
  }
}
</script>

<style lang="less" scoped>
div{
    box-sizing: border-box !important;
}
.common-list-body{
    background-color: #FFF;

    .panel{
        width: 100%;
        padding: 10px 2% 0;

        .line{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;

            .left{
                width: 40%;
                padding: 5px;
                color: #2f3542;
                line-height: 28px;
                font-size: 13px;

                .note{
                    color: #d8d8d8;
                    margin-right: 5px;
                }
            }

            .right{
                width: 60%;
                padding: 5px;
                color: #7b8290;
                text-align: right;
                line-height: 28px;
                font-size: 13px;
            }
            .right_new{
                padding: 5px;
                color: #7b8290;
                text-align: left;
                line-height: 28px;
                font-size: 13px;
            }
        }
    }

    .imgPanel{
        width: 100%;
        overflow: hidden;

        .imgMax{
            width: calc(160vw + 20px);
            margin-left: calc(-30vw - 10px);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .imgPrev{
                width: 50vw;
                min-height: 1px;
            }
            .imgCurrent{
                width: 60vw;
                min-height: 1px;
            }
            .imgNext{
                width: 50vw;
                min-height: 1px;
            }
        }
    }

    .filePanel{
        font-size: 7px;
        .fileline{
            width: calc(100vw - 60px);
            color: #596174;
        }
    }
}
</style>